<template>
  <!-- 根组件挂载点 -->
  <div id="app">
    <!-- 根路由切换 -->
    <router-view />
  </div>
</template>

<script>
  import store from '@/store'
  export default{
    data() {
      return {
        timer_wanConf: null,
        count: 0,
        timer: false,
        sured: false,
      }
    },
    created(){

      if(this.$store.state.info.perm == "") {
        this.$store.dispatch("info/get_perm")
      }

      if(sessionStorage.getItem('store')){
        this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
        // Object.assign(this.$store.state, JSON.parse(sessionStorage.getItem('store')))
        this.$store.commit("user/RESET_STATE")
      }
      // 保存state
      window.addEventListener('beforeunload', ()=> {
        sessionStorage.setItem('store', JSON.stringify(this.$store.state))
      })
      // App.vue 挂载的根节点  不走路由没有生命周期
      this.timer_wanConf = setInterval(()=> {
        this.$req.get("/webapi?op=long_link").then(res=> {
          if(this.$store.state.info.showModal){
            if(this.count) {
              let message = this.$store.state.info.successMsg
              this.$store.dispatch("user/resetState").then(()=> {
                this.$message({
                  type: "success",
                  message,
                  showClose: true,
                })
                window.location.reload()
              })
            } else {
              this.count = 1
            }
          } else {

          }
        }).catch(err=> {
          // then 方法内error or exception 还是会走catch 这就是then和catch先后都走的情况
          // TODO 断网之后回调处理函数
          if(this.timer || this.$store.state.info.showModal){
            return
          }
          // 出错只会弹出一次  网络恢复后才有可能再次弹出
          this.timer = true
          this.$alert(this.$t("notification.routerDisconnect"), {
            type: "warning",
            title: this.$t("messageBox.title.info"),
          }).then(()=> { this.sured = true })
        }).finally(()=> {
          // console.log(this.$store.state.info.showModal, this.count)
        })
      }, 5000)
    }
  }
</script>
<style lang="scss">
// 修改nprogress进度条的颜色
#nprogress .bar{
  background: #fff !important;
}
</style>
